<template>
    <div>
        <div class="search">

                <input
                    type="text"
                    placeholder="输入要选择的城市/拼音"
                    class="search-input"
                    v-model="keywords"
                >

        </div>
        <div class="search-res">
            <ul>
                <li
                    v-for="item in list"
                    class="search-item border-bottom"
                    @click="handleCity(item.name)"
                >
                    {{item.name}}
                </li>
            </ul>
        </div>
        <div class="search-res" v-show="panduan">
            <ul>
                <li class="search-item border-bottom">没有找到数据~</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Search",
        props:['cities'],
        data () {
            return {
                keywords:'',
                list:[],
                timer:null
            }
        },
        computed: {
            panduan(){
                if (!this.list.length && this.keywords) {
                    return true
                }
                else{
                    return false
                }
            }
        },

        methods:{
            handleCity:function (cityName) {
                // console.log(cityName);
                this.$store.dispatch('changeCity',cityName);
                this.$router.push('/')
            }
        },
        watch:{
            keywords () {
                if (this.timer){
                    clearTimeout(this.timer)
                }
                if (!this.keywords){
                    this.list = [];
                    return
                }
                this.timer = setTimeout(()=>{
                    const result = [];

                    for (let i in this.cities){
                        this.cities[i].forEach((value)=>{
                            if (value.spell.indexOf(this.keywords) > -1 ||
                                value.name.indexOf(this.keywords) > -1
                                ) {
                                result.push(value)
                            }
                        })
                    }
                    this.list= result
                },100)
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '~@/assets/styles/varibles.styl'
    .search
        height: .72rem
        padding: 0 .1rem
        background: $bgColor
        .search-input
            box-sizing: border-box
            width: 100%
            height: .62rem
            padding: 0 .1rem
            line-height: .62rem
            text-align: center
            border-radius: .06rem
            color: #666
    .search-res
        z-index:1
        overflow: hidden
        position: absolute
        top:1.58rem
        left:0
        right:0
        buttom:0
        background:#fff
        .search-item
            line-height:.62rem
            padding-left:.2rem
            color:#666
</style>
